// Cannot find module '@babel/core'  此时是因为gulp-babel的版本问题要安装 7.+版本的 8.+不行
$(() =>{
    //获取每一个文本框的集合
    const loginInput = $('#login-form input')
    const registerInput = $('#register-form input')
    let labelNull = null
//--------------------------------------登陆注册的切换
    // 登陆切换注册
    changeOpa()
    function changeOpa(){
        $('#no-count').on('click', () =>{
            //登陆隐藏 注册显示
            $('.login-count').css('display', 'none')
            $('.register-count').css('display', 'block')
            $('#login-count-exist').css('display', 'none')
            //取消高亮显示
            inputOpa(loginInput)
            
        })
        //注册切换 登陆
        $('#has-count').on('click', () =>{
            //登陆隐藏 注册显示
            $('.login-count').css('display', 'block')
            $('.register-count').css('display', 'none')
            $('#register-count-exist').css('display', 'none')
            //取消高亮显示
            inputOpa(registerInput)
        })
        // 前往首页按钮
        $('#to-home-link').on('click', () =>{
            window.location.href = 'http://localhost:3003/'
        })
    }
//--------------------------------------登陆注册的切换

//--------------------------------------登陆注册输入框高亮显示
    changeInput()
    function changeInput(){
        /*
            1、获取焦点的文本框边框 图片高亮
            2、label的文字消失
        */
        //登陆
        loginInput.on('focus', function(){
            inputOpa(loginInput, this, '#4081f5')
            $(this).siblings('label').css('display', 'none')
             /*
                此时要判断 用户名错误 还是 密码错误
                用户名错误 点击密码文本框 信息提示不消失
                反之密码错误 点击用户名文本框 信息提示不消失
            */

             const myType = $('#login-count-exist').attr('myType')
             const myId = $(this).attr('id')
             
            if(
                //用户名错误
                (myType === 'login-name' && myId === 'login-name') || 
                //密码错误
                (myType === 'login-paw' && myId === 'login-paw')
            ){
                $('#login-count-exist')
                    .css('display', 'none')
                    .attr('myType', 'none')
            }
        })

        //注册
        registerInput.on('focus', function(){
            inputOpa(registerInput, this, '#4081f5')
            $(this).siblings('label').css('display', 'none')
            //当注册用户名获取焦点 用户名已存在文字隐藏
            if($(this).attr('id') != 'register-name') return
            $('#register-count-exist').css('display', 'none')
        })

        //眼睛切换
        $('.right-content .paw-eye').on('click', function(){

            //密码可见
            if($(this).children('.active-img').css('display') === 'none'){
                $(this).siblings('input').attr({type: 'text'})
                $(this).children('.active-img').css('display', 'block').prev('img').css('display', 'none')
                return
            }

            $(this).siblings('input').attr('type', 'password')
            $(this).children('.active-img').css('display', 'none').prev('img').css('display', 'block')
        })
    }
//--------------------------------------登陆注册输入框高亮显示
//--------------------------------------登陆注册逻辑
    login_register()
    function login_register(){
        // 登陆
        $('#login-form').on('submit', function(ev){
            ev = ev || event
            const userName = $('#login-name').val()
            const paw = $('#login-paw').val()
            //判断 显示相应的数据
            if(!userName) {
                labelTetx(this, '.name', loginInput)
                ev.preventDefault()
                return 
            }else if(!paw) {
                labelTetx(this, '.paw', loginInput)
                ev.preventDefault()
                return 
            }

            //看看是否记住密码
            rememberMe()
        })

        //注册
        $('.register-btn').on('click', function(){
            //验证邮箱是否正确
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

            const userName = $('#register-name').val()
            const paw = $('#register-paw').val()
            const email = $('#register-email').val()
            const formNode = $('#register-form')

             //判断
            if(!userName){
                return labelTetx(formNode, '.name', registerInput)
            }else if(userName.length < 3 || userName.length > 6){
                $('#checkUserNameText').html('*请输入3~6个字符的用户名')
                return labelTetx(formNode, '.name', registerInput)
            }else if(!paw) {
                $('#checkPawText').html('*请输入您的用密码')
                return labelTetx(formNode, '.paw', registerInput)
            }else if(paw.length < 6) {
                $('#checkPawText').html('*您的密码长度过短')
                return labelTetx(formNode, '.paw', registerInput)
            }else if(!email) {
                $('#checkEmailText').html('*请输入您的用邮箱')
                return labelTetx(formNode, '.email', registerInput)
            }else if(!reg.test(email)) {
                $('#checkEmailText').html('*您的邮箱格式错误')
                return labelTetx(formNode, '.email', registerInput)
            }

            $.ajax({
                type: 'post',
                url:'http://localhost:3003/register',
                data:{
                    userName,
                    paw,
                    email
                },
                dataType: 'json',
                success(res){
                    const {msg, code} = res
                    //用户名已经存在
                    if(code === 0) return $('#register-count-exist').css('display', 'block')
                    //否则注册成功 跳转首页
                    location.replace('http://localhost:3003/')
                }
            })

        })

        function labelTetx($this, $child, $inputType){
            // $this 登陆或者注册按钮 div节点
            // $child 表单子元素
            // $inputType 当前文本框是登陆还是注册的集合
            //获取当前没有输入值的label节点 当再次获取焦点的时候隐藏
            labelNull = $($this).children($child).children('label')
            const _this = labelNull.css('display', 'block')
                                    .siblings('input')

            inputOpa($inputType, _this, 'red')
        }
    }
//--------------------------------------登陆注册逻辑


//--------------------------------------记住我
    
    function rememberMe(){
        const flag = $(this)[0].checked
        if(flag){
            //记住密码 保存在localStorage



            return
        }

        //否则保存在
    }

//--------------------------------------记住我



//--------------------------------------公共方法
    //input高亮显示
    function inputOpa($node, $this, $color){
        /*
            $noed 遍历的input集合
            $this 当前点击input的 this
            $color 边框颜色
        */
        $.each($node, (index, item) =>{
            $(item).css('border', '1px solid transparent')
                .siblings('.active-img').css('display', 'none')
                //文本清空
                if(!$this){
                    $(item).val('')
                }
        })

        //如果成立即为点击某个input需要高亮显示
        if($this){
            //边框 图片高亮
            $($this).css('border', '1px solid '+ $color)
                .siblings('.active-img').css('display', 'block')
        }else if(labelNull){//当切换登陆注册时label的文本应该消失
            labelNull.css('display', 'none')
            labelNull = null
        }
    }
//--------------------------------------公共方法
})
